{% extends 'base.html' %}
{% load static %}

{% block title %}订单提交成功 - 商城系统{% endblock %}

{% block extra_css %}
<style>
    .success-container {
        background-color: #f8f9fa;
        padding: 60px 0;
        min-height: 70vh;
    }
    
    .success-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,.1);
        padding: 30px;
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .success-icon {
        color: #28a745;
        font-size: 64px;
        margin-bottom: 20px;
    }
    
    .success-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
    }
    
    .order-info {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 20px;
        text-align: left;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .order-info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    
    .order-info-label {
        color: #666;
        font-weight: 500;
    }
    
    .order-info-value {
        color: #333;
        font-weight: 600;
    }
    
    .action-buttons {
        margin-top: 30px;
    }
    
    .action-buttons .btn {
        margin: 0 8px;
        min-width: 140px;
    }
</style>
{% endblock %}

{% block content %}
<div class="success-container">
    <div class="container">
        <div class="success-card">
            <div class="success-icon">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            
            <h1 class="success-title">订单提交成功！</h1>
            
            {% if order.order_status == 'PENDING' %}
                <p class="text-muted">您的订单已提交，请尽快完成支付</p>
            {% elif order.order_status == 'PAID' %}
                <p class="text-muted">您的订单已支付，商家正在处理您的订单</p>
            {% endif %}
            
            <div class="order-info">
                <div class="order-info-row">
                    <span class="order-info-label">订单号</span>
                    <span class="order-info-value">{{ order.order_id }}</span>
                </div>
                <div class="order-info-row">
                    <span class="order-info-label">订单金额</span>
                    <span class="order-info-value">¥{{ order.actual_amount }}</span>
                </div>
                <div class="order-info-row">
                    <span class="order-info-label">支付方式</span>
                    <span class="order-info-value">{{ order.get_pay_method_display }}</span>
                </div>
                <div class="order-info-row">
                    <span class="order-info-label">订单状态</span>
                    <span class="order-info-value badge bg-{{ order.order_status_display_color }}">
                        {{ order.get_order_status_display }}
                    </span>
                </div>
            </div>
            
            {% if order.pay_method != 'cod' and order.order_status == 'PENDING' %}
            <div class="alert alert-warning">
                <i class="bi bi-exclamation-triangle"></i>
                请在24小时内完成支付，否则订单将自动取消
            </div>
            {% endif %}
            
            <div class="action-buttons">
                {% if order.order_status == 'PENDING' %}
                    <a href="{% url 'payment' order_id=order.order_id %}" class="btn btn-primary">
                        立即支付
                    </a>
                {% endif %}
                <a href="{% url 'order_detail' order_id=order.order_id %}" class="btn btn-outline-secondary">
                    查看订单详情
                </a>
                <a href="{% url 'index' %}" class="btn btn-outline-primary">
                    继续购物
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %} 